<template>
  <view class="seckill-card" @click="goDetail">
    <!-- 商品图片 -->
    <image :src="item.dishImage" class="product-image" mode="aspectFill" />

    <view class="card-content">
      <!-- 标题和价格 -->
      <view class="title">{{ item.dishName }}</view>
      <view class="price">
        <text class="original-price">¥{{ item.originalPrice }}</text>
        <text class="seckill-price">¥{{ item.seckillPrice }}</text>
      </view>

      <!-- 状态标签 -->
      <view :class="['status-tag', statusClass]">
        {{ statusText }}
      </view>

      <!-- 进度条 -->
      <view class="progress">
        <view class="progress-bar" :style="{ width: progress + '%' }"></view>
        <text class="progress-text">已售{{ soldPercent }}%</text>
      </view>

      <!-- 倒计时/按钮 -->
      <view v-if="status === 1" class="countdown">
        <text>距开始: </text>
        <uni-countdown
            :show-day="true"
        :show-hour="true"
        :show-minute="true"
        :show-second="true"
        :second="timeLeft"
        @timeup="onTimeUp">

        </uni-countdown>


      </view>

      <button
        v-else-if="status === 3"
        class="seckill-btn"
        @click.stop="doSeckill"
      >立即抢购</button>

      <view v-else class="ended-text">活动已结束</view>
    </view>
  </view>
</template>

<script>
import { parseDate, getTimeStatus, getCountdown } from '@/utils/dateUtils'

export default {
  props: {
    item: Object // 接收秒杀活动数据
  },
  computed: {
    // 计算活动状态（1-未开始 2-已结束 3-进行中）
    status() {
      const status = getTimeStatus(this.item.startTime, this.item.endTime)
      // 转换为数字状态码以保持兼容性
      const statusMap = {
        'upcoming': 1,
        'ended': 2,
        'active': 3
      }
      return statusMap[status] || 2
    },
    // 状态文本
    statusText() {
      return {
        1: '未开始',
        2: '已结束',
        3: '进行中'
      }[this.status];
    },
    // 状态样式
    statusClass() {
      return {
        1: 'not-started',
        2: 'ended',
        3: 'ongoing'
      }[this.status];
    },
    // 进度条百分比
    progress() {
      const total = this.item.seckillQuantity;
      const sold = this.item.soldQuantity || 0;
      return Math.min(100, (sold / total) * 100);
    },
    soldPercent() {
      return Math.floor(this.progress);
    },
    // 剩余秒数（用于倒计时）
    timeLeft() {
      const countdown = getCountdown(this.item.startTime)
      return countdown.totalSeconds
    }
  },
  methods: {
    goDetail() {
      uni.navigateTo({
        url: `/pages/seckill/detail?id=${this.item.releaseId}`
      });
    },
    doSeckill() {
      // 调用秒杀API
      this.$emit('seckill', this.item.releaseId);
    },
    onTimeUp() {
      // 倒计时结束后刷新数据
      this.$emit('refresh');
    }
  }
}
</script>

<style scoped>
.seckill-card {
  display: flex;
  margin: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
}

.card-content {
  flex: 1;
  margin-left: 20rpx;
}

.status-tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
}

.not-started { background-color: #f0ad4e; } /* 未开始 - 橙色 */
.ongoing { background-color: #07c160; }    /* 进行中 - 绿色 */
.ended { background-color: #999; }         /* 已结束 - 灰色 */

.progress {
  height: 40rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  margin: 10rpx 0;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff971b, #ff5000);
  border-radius: 20rpx;
}

.progress-text {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: #fff;
  text-shadow: 0 0 2rpx #000;
}

.seckill-btn {
  background: linear-gradient(90deg, #ff971b, #ff5000);
  color: white;
  border-radius: 40rpx;
  margin-top: 10rpx;
}
</style>
